<template>
	<view class="container">
		<view class="itemBox" v-for="(item,index) in list" :key="index" @click="markRead(item, index)">
			<view class="tit flex-ac flex-b">
				<view class="hd flex-ac">
					<view>【{{item.title}}】</view>
					<view class="dot" v-if="item.isRead === 0"></view>
				</view>
				<view class="bd">{{item.createTime}}</view>
			</view>
			<view class="content">
				<!-- {{item.content}} -->
				<rich-text class="text" :nodes="item.content"></rich-text>
				<!-- <view class="text" v-for="(el,idx) in item.content.split('<br>')">{{el}}</view> -->
			</view>
			<view class="footer flex-ac">
				<view>查看详情></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryForm: {
					current: 1,
					size: 15
				},
				list: []
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			// this.getList()
		},
		onShow() {
			setTimeout(()=>{
				this.list = []
				this.queryForm.current = 1
				this.getList()
			}, 100)
		},
		methods: {
			getList(){
				this.$Net.post('/sysNotice/list', this.queryForm).then(res=>{
					if (this.queryForm.current == 1) {
						this.list = res.data.records
					} else {
						this.list = this.list.concat(res.data.records)
					}
				})
			},
			// 标记已读
			// 修改状态（未读改已读）：/sysNotice/updateStatus/{id}
			// 批量已读(id逗号隔开)：/sysNotice/batchUpdateStatus/{ids}
			markRead(item, index) {
				this.$Net.post('/sysNotice/updateStatus/' + item.id).then(res=>{
					if(res.code === 0){
						this.list[index].isRead = 1
						if(item.content){
							item.content.split('<br>').map(el=>{
								console.log(el)
								if(el.split('：')[0] == '车次号'){
									const regex = /\d+-\d+/; // 匹配连续数字-连续数字的模式
									const result = el.split('：')[1].match(regex);
									// console.log(result[0])
									let transportNo = result[0]
									uni.setStorageSync('transportNo', transportNo)
									this.$Jump.reLaunch('/pages/category/category')
								}
							})
						}
					}
				})
			}
			
			
		},
		onReachBottom() {
			this.queryForm.current++
			this.getList()
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f9f9f9; }
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	view{
		box-sizing: border-box;
	}
	.itemBox{
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		padding-left: 26rpx;
		padding-right: 16rpx;
		.tit{
			width: 100%;
			height: 80rpx;
			.dot{
				width: 14rpx;
				height: 14rpx;
				background-color: red;
				border-radius: 50%;
				margin-left: 10rpx;
			}
			.bd{
				font-size: 26rpx;
			}
		}
		.content{
			width: 100%;
			margin-bottom: 12rpx;
			.text{
				width: 100%;
			}
		}
		.footer{
			width: 100%;
			flex-direction: row-reverse;
			padding-bottom: 26rpx;
			color: #1674Fc;
		}
	}
	.container{
		width: 100%;
		height: 100%;
		padding: 30rpx;
	}
</style>
